<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>New Tables</title>
<!--     <link href="siteag.css" rel="stylesheet">
<link href="juc.css" rel="stylesheet"> -->

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<!-- <link href="ja.css" rel="stylesheet">
    <script src="jquery.appendGrid-1.3.6.js"></script>
    <script src="jqueryvalidate.js"></script> -->
    
    
<link href="css/bootstrap.css" rel="stylesheet">

<style>
#myFormSD {
	width: 650px;
		
}
label.error {
	color: red;	
}
</style>

<script id="jsSource" type="text/javascript">
	var oadbSD = [];
	var oaformSD = [];
	var m = 1;

	function latestFormSD(myFormSD) {
		console.log(":: latestFormSD:myFormSD ::" + JSON.stringify(myFormSD));
		var localoaformSD = [];
		oaformSD = [];
		var x2 = myFormSD;
		//alert(":: x2 ::" + x2.length);
/* alert("asdasdasdasd:::::"+x2.length) */
		for (i = 0, j = 1; i < x2.length; i = i + 6, j++) {
			var obj = {};
			var x3 = x2.slice(i, i + 6);
			console.log(":: x3 ::" + JSON.stringify(x3));
			obj.sid = j;
			obj.did = x3[0].name.split('_')[1];
			obj.id = x3[0].value;
			obj.stockholderName = x3[1].value;	
			obj.value = x3[2].value;
			obj.tin = x3[3].value;
			obj.ownedPercent = x3[4].value;
			obj.cAddress = x3[5].value;
			obj.createdBy=null;
			obj.updatedBy=null;
			obj.customerid=null;
			obj.creationDate=null;
			obj.modificationDate=null;
			//obj.role = null;
			
			localoaformSD.push(obj);
		}

		oaformSD = localoaformSD;
		console.log(":: oaformSD ::" + JSON.stringify(oaformSD));
		 /* $("#myBodySD").empty();
		$.each(oaformSD,function(i, item) {
			var tblColumnId = "tblColumnIdSD_"+ item.did;
			var tblColumnSN = "tblColumnSNSD_"+ item.did;
			var tblColumnId = "tblColumnIdSD_"+ item.did;
			var tblColumnFN = "tblColumnFN_"+ item.did;
			var tblColumnPWD = "tblColumnPWD_"+ item.did;
			var tblColumnLN = "tblColumnLN_"+ item.did;
			var tblColumnE = "tblColumnE_"+ item.did;
			$("#myBodySD").append("<tr id='tblColumnTRSD_"+item.did+"'><td>"+ item.sid+ "</td><td style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstname+"' required='' /></td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastname+"' required='' /> </td><td><input type='text' name='"+tblColumnE+"' value='"+item.emailid+"' required='' /> </td><td><input type='text' name='"+tblColumnPWD+"' value='"+item.password+"' required='' /></td><td><button id='btnRemoveSDRow' onclick='rmvRow(tblColumnTRSD_"+ item.did+ ","+ item.id+ ")'>Remove Current Row</button></td></tr>");
			//m++;
		});  */
		//return oaformSD;
	}

	function convertform(myFormSD) {
		//console.log(":: convertform:myFormSD ::" + JSON.stringify(myFormSD));
		var localoaformSD = [];
		oaformSD = [];
		var x2 = myFormSD;
		//alert(":: x2 ::" + x2.length);
/* alert("asdasdasdasd:::::::"+x2.length) */
		for (i = 0; i < x2.length; i = i + 6) {
			var obj = {};
			var x3 = x2.slice(i, i + 6);
			console.log(":: x3 ::" + JSON.stringify(x3));
			//obj.sid = j;
			//obj.did = x3[0].name.split('_')[1];
			obj.id = x3[0].value;
			obj.stockholderName = x3[1].value;	
			obj.value = x3[2].value;
			obj.tin = x3[3].value;
			obj.ownedPercent = x3[4].value;
			obj.cAddress = x3[5].value;
			obj.createdBy=null;
			obj.updatedBy=null;
			obj.customerid=null;
			obj.creationDate=null;
			obj.modificationDate=null;
					
			//obj.role = null;
			
			localoaformSD.push(obj);
		}

		oaformSD = localoaformSD;
		console.log(":: oaformSD ::" + JSON.stringify(oaformSD));
		 /* $("#myBodySD").empty();
		$.each(oaformSD,function(i, item) {
			var tblColumnId = "tblColumnIdSD_"+ item.did;
			var tblColumnSN = "tblColumnSNSD_"+ item.did;
			var tblColumnId = "tblColumnIdSD_"+ item.did;
			var tblColumnFN = "tblColumnFN_"+ item.did;
			var tblColumnPWD = "tblColumnPWD_"+ item.did;
			var tblColumnLN = "tblColumnLN_"+ item.did;
			var tblColumnE = "tblColumnE_"+ item.did;
			$("#myBodySD").append("<tr id='tblColumnTRSD_"+item.did+"'><td>"+ item.sid+ "</td><td style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstname+"' required='' /></td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastname+"' required='' /> </td><td><input type='text' name='"+tblColumnE+"' value='"+item.emailid+"' required='' /> </td><td><input type='text' name='"+tblColumnPWD+"' value='"+item.password+"' required='' /></td><td><button id='btnRemoveSDRow' onclick='rmvRow(tblColumnTRSD_"+ item.did+ ","+ item.id+ ")'>Remove Current Row</button></td></tr>");
			//m++;
		});  */
		//return oaformSD;
	}
	
	function latestdbSD(mydb) {
		var localoadbSD = [];
		oadbSD = [];
		var x2 = mydb;
		//alert(":: x2 ::" + x2.length);
			
			$.each(mydb, function(i, item) {
				var obj = {};
				
				obj.sid = i+1;
				obj.did = m;
				obj.id = item.id;
				obj.ownedPercent = item.ownedPercent;
				obj.value = item.value;
				obj.stockholderName = item.stockholderName;
				obj.tin = item.tin;
				obj.cAddress = item.cAddress;
				obj.createdBy=null;
				obj.updatedBy=null;
				obj.customerid=null;
				obj.creationDate=null;
				obj.modificationDate=null;
				//obj.role = null;
				
				localoadbSD.push(obj);
				m++;
			});

		oadbSD = localoadbSD;
		console.log(":: oaformSD ::" + JSON.stringify(oadbSD));
		
	/* 	$.each(oadbSD,function(i, item) {
			var tblColumnId = "tblColumnIdSD_"+ item.did;
			var tblColumnSN = "tblColumnSNSD_"+ item.did;
			var tblColumnId = "tblColumnIdSD_"+ item.did;
			var tblColumnFN = "tblColumnFN_"+ item.did;
			var tblColumnPWD = "tblColumnPWD_"+ item.did;
			var tblColumnLN = "tblColumnLN_"+ item.did;
			var tblColumnE = "tblColumnE_"+ item.did;
			$("#myBodySD").append("<tr id='tblColumnTRSD_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstname+"' required='' /></td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastname+"' required='' /> </td><td><input type='text' name='"+tblColumnE+"' value='"+item.emailid+"' required='' /> </td><td><input type='text' name='"+tblColumnPWD+"' value='"+item.password+"' required='' /></td><td><button id='btnRemoveSDRow' onclick='rmvRow(tblColumnTRSD_"+ item.did+ ","+ item.id+ ")'>Remove Current Row</button></td></tr>");
			//m++;
		}); */
		//return oaformSD;
	}
	
	function rmvRow(j, k) {
		var match, xcc;
		if(j.id != undefined){
			console.log(":: j.id ::" + j.id + ":: k ::" + k);
			$("#" + j.id).remove();
			xcc = j.id.split('_')[1];
		}
		else{
			console.log(":: JSON.stringify(j) ::" + JSON.stringify(j) + ":: k ::" + k);
			$("#" + j).remove();
			xcc = j.split('_')[1];
		}
		
		console.log(":: oaformSD ::" + JSON.stringify(oaformSD));
		console.log(":: xcc ::" + xcc);
		$.each(oaformSD,function(i, item) {
			console.log(":: item.did ::" + item.did);
			if(item.did == xcc) match=item.sid;
		});
		console.log(":: match ::" + match);
		oaformSD.splice(match, 1);
		var z = ($("#myFormSD").serializeArray().length) / 4;
		var usl1 = oadbSD.length;
		var lchk1 = usl1 == z;
		if (lchk1)
			$("#btnRemoveSD").prop('disabled', true);
		else
			$("#btnRemoveSD").prop('disabled', false);

		var x2 = $("#myFormSD").serializeArray();
		latestFormSD(x2);

		if (k != 0){
			$.get("customer/deleteStocksDistributionById", {
				id : k
			}, function(data) {

			});
			var cId= '${custId}';
			$.get("customer/getAllStocksDistribution",{id:cId},function(data) {
				
				latestdbSD(data);
				var d = ($("#myFormSD").serializeArray().length) / 4;
				l = data.length;
				var r = l == d;
				if (r)
					$("#btnRemoveSD").prop('disabled', true);
				else
					$("#btnRemoveSD").prop('disabled', false);

				var x2 = $("#myFormSD").serializeArray();
				latestFormSD(x2);
			});
			
		}
	}
	
	$.validator.setDefaults({
		submitHandler : function() {
//alert("::1::");
			var x2 = $("#myFormSD").serializeArray();
			//alert("::2::");
			convertform(x2);
			//alert("::3::");
			console.log(":: submitHandler:oaformSD ::"+JSON.stringify(oaformSD));
			//alert("::4::");
			var cId= '${custId}';
			//alert("::5::");
			var oaformSDn = JSON.stringify(oaformSD);
			//alert("::6::");
			//var x = {businessNatures:oaformSDn,custId:cId};
			var x = {stocksDistribution:oaformSD,custId:cId};
			console.log("::x::"+x);
			$.ajax({
				headers : {
					'Accept' : 'application/json',
					'Content-Type' : 'application/json; charset=utf-8'
				},
				type : "POST",
				url : "customer/saveAllStocksDistribution",
				contentType : "application/json; charset=utf-8",
				data : JSON.stringify(x),
				async : false, //Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation
				cache : false, //This will force requested pages not to be cached by the browser          
				processData : false,
				success : function(resposeJsonObject) {
					//$("#myFormSD").attr("action", "businessNature");
					console.log(":: resposeJsonObject ::"+JSON.stringify(resposeJsonObject));
					latestdbSD(resposeJsonObject);
					$("#myBodySD").empty();
					$.each(oadbSD,function(i, item) {
						var tblColumnId = "tblColumnIdSD_"+ item.did;
						var tblColumnSN = "tblColumnSNSD_"+ item.did;
						//var tblColumnId = "tblColumnIdSD_"+ item.did;
						var tblColumnSH = "tblColumnSHSD_"+ item.did;
					    // var tblColumnPWD = "tblColumnPWD_"+ item.did;
						var tblColumnV = "tblColumnVSD_"+ item.did;
						var tblColumnT = "tblColumnTSD_"+ item.did;
						var tblColumnP = "tblColumnPSD_"+ item.did;
						var tblColumnA = "tblColumnASD_"+ item.did;
						$("#myBodySD").append("<tr  class='info' id='tblColumnTRSD_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><input type='text' name='"+tblColumnSH+"' value='"+item.stockholderName+"' required='' /></td><td><input type='text' name='"+tblColumnV+"' value='"+item.value+"' required='' number='true'/> </td><td><input type='text' name='"+tblColumnT+"' value='"+item.tin+"' required='' /> </td><td><input type='text' name='"+tblColumnP+"' value='"+item.ownedPercent+"' required='' number='true'/> </td><td><input type='text' name='"+tblColumnA+"' value='"+item.cAddress+"' required='' /> </td><td><button id='btnRemoveSDRow' type='button' onclick='rmvRow(tblColumnTRSD_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
						//m++;
					});
					
				}
			});
		}
	});


	$(document).ready(function() {
		                var cId= '${custId}';
						var l = 0;
						

						$("#myFormSD").validate();
				

						$.get("customer/getAllStocksDistribution",{id:cId},function(data) {
											
											latestdbSD(data);
											
											
											$.each(oadbSD,function(i, item) {
												var tblColumnId = "tblColumnIdSD_"+ item.did;
												var tblColumnSN = "tblColumnSNSD_"+ item.did;
												//var tblColumnId = "tblColumnIdSD_"+ item.did;
												var tblColumnSH = "tblColumnSHSD_"+ item.did;
											//	var tblColumnPWD = "tblColumnPWD_"+ item.did;
												var tblColumnV = "tblColumnVSD_"+ item.did;
												var tblColumnT = "tblColumnTSD_"+ item.did;
												tblColumnP = "tblColumnPSD_"+ item.did;
												var tblColumnA = "tblColumnASD_"+ item.did;
												$("#myBodySD").append("<tr  class='info' id='tblColumnTRSD_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><input type='text' name='"+tblColumnSH+"' value='"+item.stockholderName+"' required='' /></td><td><input type='text' name='"+tblColumnV+"' value='"+item.value+"' required='' number='true'/> </td><td><input type='text' name='"+tblColumnT+"' value='"+item.tin+"' required='' /> </td><td><input type='text' name='"+tblColumnP+"' value='"+item.ownedPercent+"' required='' number='true'/> </td><td><input type='text' name='"+tblColumnA+"' value='"+item.cAddress+"' required='' /> </td><td><button id='btnRemoveSDRow' type='button' onclick='rmvRow(tblColumnTRSD_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
												//m++;
											});
											
											
											
											var d = ($("#myFormSD").serializeArray().length) / 4;
											l = data.length;
											var r = l == d;
											if (r)
												$("#btnRemoveSD").prop('disabled', true);
											else
												$("#btnRemoveSD").prop('disabled', false);

											var x2 = $("#myFormSD").serializeArray();
											latestFormSD(x2);
										});

						
						
						$("#btnSubmitSD").click(function() {
                                            console.log("m"+m);
											var tblColumnSN = "tblColumnSNSD_"+ m;
											var tblColumnId = "tblColumnIdSD_"+ m;
											var tblColumnSH = "tblColumnSHSD_"+ m;
											var tblColumnV = "tblColumnVSD_"+ m;
											var tblColumnT = "tblColumnTSD_"+ m;
											var tblColumnP = "tblColumnPSD_"+ m;
											var tblColumnA = "tblColumnASD_"+ m;
											var d = $("#myFormSD").serializeArray().length;
											var d1=(d/6)+1;
											$("#myBodySD").append("<tr class='info' id='tblColumnTRSD_"+m+"'><td>"+d1 + "</td><td  style='display: none'>"+ m+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='' /></td><td><input type='text' name='"+tblColumnSH+"' value='' required='' /></td><td><input type='text' name='"+tblColumnV+"' value='' required='' number='true'/> </td><td><input type='text' name='"+tblColumnT+"' value='' required='' /> </td><td><input type='text' name='"+tblColumnP+"' value='' required='' number='true'/> </td><td><input type='text' name='"+tblColumnA+"' value='' required='' /> </td><td><button id='btnRemoveSDRow' type='button' onclick='rmvRow(tblColumnTRSD_"+ m+ ",0)' class='btn btn-default' title='Delete from Browser'><span class='glyphicon glyphicon-remove'></span></button></td></tr>");
											m++;

											var d2 = $("#myFormSD").serializeArray().length;
											l = oadbSD.length;
											var r = l == d2;
											if (r)
												$("#btnRemoveSD").prop('disabled', true);
											else
												$("#btnRemoveSD").prop('disabled', false);
											var x2 = $("#myFormSD").serializeArray();
											latestFormSD(x2);

										});
						
						
						
						$("#btnRemoveSD").click(function() {

							var x2 = $("#myFormSD").serializeArray();
							latestFormSD(x2);
							
							
							var forml = oaformSD.length;
							
							console.log(":: oaformSD[forml-1].did ::"+oaformSD[forml-1].did);
							console.log(":: z ::"+forml);
							
                            $.get("customer/getAllStocksDistribution",{id:cId},function(data) {
								
								latestdbSD(data);
							});
							var dbl = oadbSD.length;
							
							console.log(":: dbl ::"+dbl);
							
							var lchk1 = forml == dbl;
							
							console.log(":: lchk1 ::"+lchk1);
							
							if (lchk1)
								$("#btnRemoveSD").prop('disabled', true);
							else{
								$("#tblColumnTRSD_" + oaformSD[forml-1].did).remove();
								$("#btnRemoveSD").prop('disabled', false);
							}

							m--;

						});

					});
</script>
</head>
<body>
	<div align="center">

		<form id="myFormSD" novalidate="novalidate" action="">
			<div id="divSource">
			<br>
				<table id="myTable" class="table table-hover">
					
						<tr>
						    <th>S. No.</th>
							<th style="display: none">U. No.</th>
							<th style="display: none">id</th>
							<th>Stock holder Name</th>
							<th>Value</th>
							<th>Tin</th>
							<th>Owned Percent</th>
							<th>cAddress</th>
							<th>Actions</th>
						</tr>
					
					<tbody id="myBodySD">

					</tbody>
				</table>
				<button type="button" id="btnSubmitSD" class='btn btn-default' title='Add new row to Browser'> <span class="glyphicon glyphicon-plus"></span> New Row</button>
			<button type="button" id="btnRemoveSD" class='btn btn-default' title='Remove last row from Browser'> <span class="glyphicon glyphicon-remove"></span> Last Row</button>
			<button type="submit" id="btnSaveAllSD" class='btn btn-default' title='Save all rows to DB'> <span class="glyphicon glyphicon-floppy-disk"></span> All Rows</button>
			<!-- <input id="btnSaveAllSD" type="submit" value="Save All Rows"/> -->
				

			</div>
			
		</form>

	</div>

</body>
</html>